* {
  box-sizing: border-box;
  line-height: 130%;
}

body {
  background-color: white;
  /*padding:2%,2%,2%,2%;*/
  font-family: 'Sen','Jaldi', 'Tajawal', sans-serif;
  max-width: 960px;
  min-width: 320px;
  margin: 0 auto;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 1.4em;
  color: #f3343c;
 /* text-align: left;*/
}

h2 {
  font-size: 1.2em;
  color: #fc7d6b;
  text-align: center;
}

p {
  padding-top: 0;
	color: #00001a;
	font-size: 1.2em;
  /*text-align: left;*/
  /*text-align: justify;*/
}


a {
  color:#E91E63;
  line-height: 1.2;
  text-decoration: none;
}

a:hover {
  color: #00838f;
}

/* HEADER */
header {
  position: fixed;
  width: 100%;
  max-width: 960px;
  padding: 10px 3% 10px 3%;
  background: rgba(255,255,255, .80);
  z-index: 100;

}

#logo {
  width: 120px;
  padding-top: 12px;
  padding-left: 12px;
}

nav {
  margin-top: 30px;
  float: right;
}

/* style for active nav */
nav a.active {
  color: #f3343c;
  font-weight: bold;
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #00001a;
}

/* Change the color of links on hover */
.topnav a:hover {
    color: #00838f;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    background-color: transparent;
}

/* Makes sure the content shows below the header, but can scroll under it */
.below-header-container {
  margin-top: 86px;
  display: inline-block;
}



/* MAIN SECTION */
/* -----HOME*/

.cover-picture img {
  margin-top: 80px;
  width: 100%;
}

.text {
  padding:10%;
}

.centre {
  text-align: center;
}

.list {
  padding-top: 0;
}

#homeParagraph {
  text-align: center;
}

a.button-primary {
  border: 2px solid #fc7d6b;
  border-radius: 4px;
  background-color: white;
  color: #fc7d6b;
/*---Font has is not centered---*/
  padding: 14px 28px 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 40px;
  text-transform: uppercase;
}

a.button-primary:hover {
  background-color: #fc7d6b;
  color: #ffffff;
}

/*-----SHOP----*/

#shopParagraph {
  text-align: center;
  background-color: #f6be9b;
  width: 100%;
}

#catalogueParagraph {
  text-align: center;
  background-color: #fae6e7;
  width: 100%;
}


/*---Makes some paragraphs white---*/

.white {
  color: #ffffff;
}

#shipping {
  max-width: 100%;
}

/*-------ABOUT*/
.about {
  text-align: center;
  display: inline-table;
  padding: 0;
}

.about img {
  width: 100%;
  max-width: 425px;
}

/*.firstParagraph {
  padding-bottom: 0;
}*/

.about a {
  text-align: left;
}

/*
#secondParagraph {
  padding-top: 0;
}

#thirdParagraph {
  padding-top: 0;
}*/


/*#letslearnxhosa {
  padding:0;
  margin:0;
}*/




/*-------GALLERY*/

.gallery-container {
  text-align: center;
  display: inline-table;
  padding: 0;
  width: 100%;
}

.gallery-container h2 {
  padding: 0 16px;
}

.gallery-main .medium:hover {
  opacity: .7;
}

.medium {
  max-width: 480px;
  display: block;
  position: relative;
  text-align: right;
  padding: 0px 40px 40px 40px;
}

.firstImage {
  padding-top: 40px;
}

.firstImage + div {
  margin-bottom: 24px;
}

.watercolour1 {       background-color: #dd8b73; }
.watercolour2 {       background-color: #fcaf3b; }
.octopusgarden {      background-color: #ffa89d; }
.octopusgardenblue {  background-color: #0d2144; }
.octopusgardennew {   background-color: #90b8c5; }
.riso {               background-color: #fab0bc; }
.waiting {            background-color: #db9c01; }
.cave1 {              background-color: #e45e5f; }
.cave2 {              background-color: #9c4f43; }
.cave3 {              background-color: #8b9870; }
.cave4 {              background-color: #ffa89d; }
.woman {              background-color: #e45e5f; }
.owl {                background-color: #fcaf3b; }
.rat {                background-color: #8b9870; }
.arirang {            background-color: #ffa89d; }
.band {               background-color: #0d2144; }
.silk {               background-color: #90b8c5; }
.fish {               background-color: #70a795; }
.fish1 {              background-color: #f4e36e; }
.fish2 {              background-color: #0d2144; }
.hermit {             background-color: #3d8786; }
.coral1 {             background-color: #798b97; }
.coral2 {             background-color: #ff9267; }


/*-------YOU ARE HERE EXHIBITION*/
.there {               background-color: #ab985e; }
.sunset {              background-color: #899193; }
.bailey {              background-color: #c66f58; }
.bench {             background-color: #465768; }
.blossom {             background-color: #dab15c; }
.catching {             background-color: #a86e6b; }




#odaat-poster {
  max-width: 600px;
  margin: 0 auto;
}

.odaat-preview {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;;
  min-width: 300px;
  margin: 0 auto;
  justify-content: center;
}

.odaat-preview a {
  width: 150px;
  height: 150px;
  background-size: 230%;
  background-position: center;
  color: transparent;
}

.odaat-preview a:hover {
  opacity: 0.5;
}

.odaat-preview img {
  max-width: 150px;
  max-height: 150px;
  display: none;
}

.odaat-preview p {
  text-align: center;
  font-weight: bold;
  display: none;
}

.odaat-collection {
  display: inline-table;
  padding-top: 40px;
}

.odaat-collection img {
  width: 400px;
  min-height: 240px;
  background-color: #ffffff77;
}

.odaat-collection .sub-container {
  display: flex;
  background-color: #ffffff;
  margin-bottom: 16px;  
}

.odaat-collection .sub-container .subtitle {
  width: 0;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  margin-bottom: 0;  
}

.odaat-collection .sub-container .date {
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0;
}

.odaat-hands {      background-color: #f0dad4; }
.odaat-faces {      background-color: #b9bcc5; }
.odaat-charcoal {   background-color: #fff6e3; }
.odaat-patterns {   background-color: #e3ebc4; }
.odaat-plants {     background-color: #d3ded0; }
.odaat-ink {        background-color: #efe1d4; }
.odaat-abstracts {  background-color: #f7f6e3; }
.odaat-poems {      background-color: #cfd4e1; }
.odaat-comix {      background-color: #fae6e7; }
.odaat-lino {       background-color: #cfd4e1; }
.odaat-ct-scenes {  background-color: #f7f6e3; }
.odaat-dancers {    background-color: #fff6e3; }
.odaat-oils {       background-color: #e3ebc4; }

.medium img {
  display: block;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-width: 16px;
  border-color: #ffffff;
}

.medium h1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 1.8em;
  font-weight: bold;
  left: 50%;
  top: 42%;
  display: inline-block;
  padding: 0;
  margin: 0;
}

#oilH1 {
  color: #fff;
}

#inkH1 {
  color: #4dd0e1;
}

#drawH1 {
  color: #4dd0e1;
}

#marblesImage {
  border: 10px;
  border-color: blue;
}



/* ------------OIL PAINTING, WATERCOLOUR PAINTING, PRINTING, DRAWING*/
/*
.portfolio img {
  display: block;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-width: 16px;
  border-color: #ffffff;

}

.title {
  font-size: 1em;
  float:left;
  margin-top: -4px;
  margin-left: 10px;
  padding: 1%;

}

.year {
  font-size: 0.8em;
  text-align: right;
  margin-top: 0;
}
*/



.subtitle {
  font-size: 1em;
  float:left;
  margin-top: -4px;
  margin-left: 10px;
  padding: 2%;
}

.date {
  background: #ffffff;
  font-size: 0.8em;
  text-align: right;
  margin-top: 0;
  padding: 2% 5% 2% 2%;


}
.caption-hidden {
  display: none;
}

.gallery-container.shop img {
  cursor:pointer;
}

#back {
  padding-left: 2%;
  text-align: center;
}

/* EXHIBITIONS */




/* FOOTER */

footer {
  padding: 10px 3% 10px 3%; 
  background-color: #457083;
 
}

footer h1 {
  font-size: 1em;
  color: #ffffff;
}

footer p {
  text-align: left;
  font-size: 0.9em;
  color: #ffffff;
}

footer img {
  float: left;
}


#linkedIn {
  width: 35px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 3px;
}

#Instagram {
  width: 25px;
  margin-bottom: 10px;
  margin-right: 3px;
}

#Facebook {
  width: 25px;
  margin-bottom: 10px;
  margin-right: 3px;
}

#Mail {
  width: 35px;
  border-radius: 10px;
  margin-bottom: 10px;
}

#copyright {
  padding-left: inherit;
  padding-top: 24px;
  font-size: 0.8em;
}



/* MEDIA QUERIES */

/* menu */

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 425px) {
  nav { 
    margin-top: 10px;
 }
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 425px) {
  .topnav.responsive {
    position: relative;
    padding-top: 45px;
    padding-bottom: 2px;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
    margin-top: 5px;
  }
}

/* Images in gallery are shown as a two-column grid from 960px */
@media screen and (min-width: 960px) {
  /* Fix grid display on wider screens */
  .medium {
    float: left;
    padding: 40px;
    margin: 0 0 24px 0; 
  }

  .odaat-collection > .medium {
    padding: 0px 40px;
  }

  .odaat-collection img {
    height: 400px;
  }

  /* Adjust the size of the logo for wider screens */
  #logo {
    width: 200px;
    padding-bottom: 8px;
  }
  .below-header-container {
    margin-top: 114px;
  }
  .cover-picture {
    padding-top: 24px;
  }
}

/* OLD QUERIES */

@media only screen and (min-width: 430px) {

 /* .image {
    display: inline-block;
    max-width: 50%;

  }*/

  /*.text {
    display: inline-block;
    max-width: 50%;
    padding: 4%;*/

  }

  #homeParagraph {
    max-width: 100%;
  }

  #secondParagraph {
    max-width: 100%;
  }

  #thirdParagraph {
    max-width: 100%;
  }
}

@media only screen and (min-width: 680px) {

  #secondParagraph {
    max-width: 50%;
  }

  #thirdParagraph {
    max-width: 50%;
  }
/*}
@media only screen and (max-width: 680px) {

  #workImage {
    display: none;
  }

  #projectsImage {
    display: none;
  }*/

}

/*
@media only screen and (min-width: 444px) {
  nav {
    position: absolute;
    right: 0;
    float: right;
    top: 1.5em;
  }*/

  /*nav li {
    display: inline-block;
    line-height: normal;
  }

  .main-section {
    padding-top: 7.5em;
  }

  .heading h1 {
    line-height: 259%;
  }
}

@media only screen and (min-width: 500px) {

  .heading h1 {
    line-height: 120%;
  }

  article, aside {
    display: inline-block;
    width:49.5%;
  }

  aside {
    vertical-align: top;
    margin-top: 1em;
  }
}

@media only screen and (min-width: 800px) {
  .second-section article, aside, .second-section figure {
    display: inline-block;
  }

  .second-section article {
    width: 50%;
    vertical-align: top;
  }

  aside {
    width: 29%;
  }

  .second-section figure {
    width: 19%;
  }
}

@media only screen and (min-width: 900px) {

  .heading h1, .heading h3 {
    line-height: 200%;
  }

  .main-section {
    width: 900px;
    margin: auto;
  }
}
*/